<template>
  <div>
    <MainNavBar>
      <template #center-name> 信息填写 </template>
    </MainNavBar>
    <div class="container">
      <div class="roll"></div>
      <div class="line"></div>
      <div class="cardinfo">报名信息填写</div>
      <div class="info">
        <div class="base-info" v-if="!isFirst">
          <div class="top">
            <div class="name">{{ state.userInfo.sign_name }}</div>
            <div class="sex">
              （{{ state.userInfo.sex === 0 ? "男" : "女" }}）
            </div>
          </div>
          <div class="address">
            <!-- 湖北 武汉 -->
            {{ state.userInfo.city }}
          </div>
        </div>
        <div class="photo" @click="selectImg" v-if="isFirst">
          <div class="tips">运动员一寸照</div>
          <div class="header" v-if="!state.headerimg">
            <div class="add"></div>
          </div>
          <div class="header" v-else>
            <img :src="state.headerimg" alt="" />
          </div>
          <input
            type="file"
            @change="imgChange"
            ref="ipt"
            accept="image/png,image/jpg,image/jpeg"
            style="display: none"
          />
        </div>
        <div class="name" v-if="isFirst">
          <div class="tips">姓名</div>
          <div>
            <van-field
              v-model="state.name"
              placeholder="请填写运动员姓名"
              :class="{ filled: state.name != '' }"
              class="ipt"
            />
          </div>
        </div>
        <div class="name gender" v-if="isFirst">
          <div class="tips">性别</div>
          <div
            class="id-card-type ipt"
            :class="{ filled: state.gender != '请选择运动员性别' }"
            @click="showGender = true"
          >
            <span>{{ state.gender }}</span
            ><span
              ><img src="http://qnticao.laigl.com/vue/pullingDown1.png" alt=""
            /></span>
          </div>
        </div>
        <div class="name birthday" v-if="isFirst">
          <div class="tips">出生日期</div>
          <div
            class="id-card-type ipt"
            :class="{ filled: state.birthday != '请选择运动员出生日期' }"
            @click="showBirthday = true"
          >
            <span>{{ state.birthday }}</span
            ><span
              ><img src="http://qnticao.laigl.com/vue/pullingDown1.png" alt=""
            /></span>
          </div>
        </div>
        <div class="name city" v-if="isFirst">
          <div class="tips">城市</div>
          <div
            class="id-card-type ipt"
            :class="{ filled: state.city != '请选择运动员所在城市' }"
            @click="showAddress = true"
          >
            <span>{{ state.city }}</span
            ><span
              ><img src="http://qnticao.laigl.com/vue/pullingDown1.png" alt=""
            /></span>
          </div>
        </div>
        <div class="name category" v-if="isFirst">
          <div class="tips">比赛得知渠道类别</div>
          <div
            class="id-card-type ipt"
            :class="{ filled: state.category != '请选择得知渠道' }"
            @click="showCategory = true"
          >
            <span>{{ state.category }}</span
            ><span
              ><img src="http://qnticao.laigl.com/vue/pullingDown1.png" alt=""
            /></span>
          </div>
        </div>
        <div class="name category-detail" v-if="isFirst">
          <div class="tips">
            <span
              >{{
                state.category == "请选择得知渠道" ? "渠道" : state.category
              }}全称</span
            ><span v-if="state.category == '请选择得知渠道'"
              >(幼儿园、学校、俱乐部全称)</span
            >
          </div>
          <div>
            <van-field
              v-model="state.categroyDetail"
              placeholder="请填写全称或其他渠道描述"
              :class="{ filled: state.categroyDetail != '' }"
              class="ipt"
            />
          </div>
        </div>
        <div class="name level">
          <div class="tips">
            <span>{{ state.match[0].match_name }} </span
            ><span
              @click="
                goRequipment(
                  state.match[0].compet_id,
                  0,
                  state.match[0].match_name
                )
              "
              >查看动作要求 ></span
            >
          </div>
          <div
            class="id-card-type ipt filled"
            :class="{
              first:
                isFirst && state.match[0].match_name === '全国首届体操通级比赛',
            }"
            @click="showLevel = true"
          >
            <span>{{ state.level }}</span
            ><span
              ><img
                v-show="
                  (isFirst &&
                    state.match[0].match_name !== '全国首届体操通级比赛') ||
                  !isFirst
                "
                src="http://qnticao.laigl.com/vue/pullingDown1.png"
                alt=""
            /></span>
          </div>
          <div
            class="mark"
            v-if="state.match[0].match_name !== '全国首届体操通级比赛'"
          >
            注：亲子比赛配乐请自行下载歌曲《祖国的花朵》
          </div>
        </div>
        <div class="name level" v-if="state.match.length > 1">
          <div class="tips">
            <span>{{ state.match[1].match_name }}</span
            ><span
              @click="
                goRequipment(
                  state.match[1].compet_id,
                  1,
                  state.match[1].match_name
                )
              "
              >查看动作要求 ></span
            >
          </div>
          <!-- <div
            class="id-card-type ipt"
            :class="{ filled: state.parentLevel != '请选择参赛等级' }"
            @click="showParentLevel = true"
          > -->
          <div
            class="id-card-type ipt filled"
            :class="{
              first:
                isFirst && state.match[1].match_name === '全国首届体操通级比赛',
            }"
            @click="showParentLevel = true"
          >
            <span>{{ state.parentLevel }}</span
            ><span
              ><img
                v-show="
                  (isFirst &&
                    state.match[1].match_name !== '全国首届体操通级比赛') ||
                  !isFirst
                "
                src="http://qnticao.laigl.com/vue/pullingDown1.png"
                alt=""
            /></span>
          </div>
          <div
            class="mark"
            v-if="state.match[1].match_name !== '全国首届体操通级比赛'"
          >
            注：亲子比赛配乐请自行下载歌曲《祖国的花朵》
          </div>
        </div>
        <div class="prove">
          <div class="left">
            <div class="title">上传意外险保单</div>
            <div class="left_bottom">
                <div class="file" @click="selectProve">
                  <div class="header" v-if="!state.policy">
                    <div class="add"></div>
                  </div>
                  <div class="header" v-else>
                    <img :src="state.prove" alt="上传意外险保单" />
                  </div>
                  <input
                    type="file"
                    @change="proveChange"
                    ref="ipt2"
                    accept="image/png,image/jpg,image/jpeg"
                    style="display: none"
                  />
              </div>
              <div class="up_tip">
                参赛选手须在赛前由组队单位或个人自行购买保险，保险时间从报名之日至视频录制结束之日（含视频录制往返途中），保险范围是保险期内被保险人参加比赛过程出现的意外伤害事故或突发急性病事故。
              </div>
            </div>
            
          </div>
          <div class="right">
            <div class="title">上传自愿参赛告知书</div>
            <div class="left_bottom">
                <div class="file" @click="selectNotification">
                                <div class="header" v-if="!state.info_book">
                                  <div class="add"></div>
                                </div>
                                <div class="header" v-else>
                                  <img :src="state.notification" alt="上传参数告知书" />
                                </div>
                                <input
                                  type="file"
                                  @change="notificationChange"
                                  ref="ipt3"
                                  accept="image/png,image/jpg,image/jpeg"
                                  style="display: none"
                                />
                            </div>
                            <div class="up_tip">
                点击查看 <a href="http://qnticao.laigl.com/%E8%87%AA%E6%84%BF%E5%8F%82%E8%B5%9B%E8%B4%A3%E4%BB%BB%E5%8F%8A%E9%A3%8E%E9%99%A9%E5%91%8A%E7%9F%A5%E4%B9%A6.png">《自愿参赛责任及风险告知书》</a> ，保存图片到本地，打印签字后再拍照上传
                            </div>
            </div>
            
          </div>
        </div>
        <div class="bottom">
          <div class="info-detail">
            <div class="item">
              <!-- <div class="left">参赛运动员技术服务费</div> -->
              <div class="left">赛事服务费</div>
              <div class="right">
                <div>￥80</div>
                <!-- <div>x&nbsp;&nbsp;&nbsp;{{ state.match.length }}</div> -->
              </div>
            </div>
            <!-- 赛事id不为亲子赛就显示 -->
            <!-- <div class="item" v-if="subPrice">
              <div class="left">级位证书制作费</div>
              <div class="right">
                <div>￥70</div>
                <div>x&nbsp;&nbsp;&nbsp;{{ 1 }}</div>
              </div>
            </div> -->
            <!-- <div class="item">
              <div class="left">费用总计</div>
              <div class="right">
                <div>
                  ￥{{
                    subPrice
                      ? 10 * state.match.length + 70
                      : 10 * state.match.length
                  }}
                </div>
                <div>
                  ￥{{
                    80 * state.match.length
                  }}
                </div>
              </div>
            </div> -->
          </div>
        </div>
        <div
          class="go-pay"
          :class="{ paying: isPaying || !isCanClick }"
          @click="signUp"
        >
          提交并支付
        </div>
      </div>
    </div>
  </div>
  <!-- 选择性别 -->
  <van-popup v-model:show="showGender" round position="bottom">
    <van-picker
      v-if="showGender"
      title="请选择运动员性别"
      :columns="columns"
      @confirm="genderConfirm"
      @cancel="onCancel"
      :default-index="state.genderIndex"
    />
  </van-popup>
  <!-- 选择渠道类别 -->
  <van-popup v-model:show="showCategory" round position="bottom">
    <van-picker
      v-if="showCategory"
      title="请选择得知渠道"
      :columns="categorycolumns"
      @confirm="categoryConfirm"
      @cancel="onCancel"
      :default-index="state.categoryIndex"
    />
  </van-popup>
  <!-- 选择出生日期 -->
  <van-popup v-model:show="showBirthday" round position="bottom"
    ><van-datetime-picker
      v-model="currentBirthday"
      type="date"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="birthdayConfirm"
      @cancel="onCancel"
  /></van-popup>
  <!-- 选择地址 -->
  <van-popup v-model:show="showAddress" round position="bottom"
    ><van-area
      title="请选择地址"
      :area-list="areaList"
      @cancel="onCancel"
      @confirm="addressConfirm"
  /></van-popup>
  <!-- 选择等级 -->
  <van-popup v-model:show="showLevel" round position="bottom">
    <van-picker
      v-if="showLevel"
      title="请选择等级"
      :columns="getLevelStr(levelList[0])"
      @confirm="levelConfirm"
      @cancel="onCancel"
      :default-index="state.levelIndex"
  /></van-popup>
  <!-- 选择亲子体操比赛等级 -->
  <van-popup v-model:show="showParentLevel" round position="bottom">
    <van-picker
      v-if="showParentLevel"
      title="请选择等级"
      :columns="getLevelStr(levelList[1])"
      @confirm="parentLevelConfirm"
      @cancel="onCancel"
      :default-index="state.parentLevelIndex"
  /></van-popup>
  <!-- <van-loading  class="loading" v-show="isLoading" color="#1989fa" /> -->
  <!-- <van-circle
    v-show="currentRate !== 0 && currentRate != 100"
    v-model:current-rate="currentRate"
    :rate="0"
    :speed="20"
    :text="text"
  /> -->
</template>

<script>
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import wx from "weixin-js-sdk"
import {
  computed,
  onActivated,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
} from "vue";
import { areaList } from "@vant/area-data";
import { useStore } from "vuex";
import * as qiniu from "qiniu-js";
import {
  useRouter,
  useRoute,
  onBeforeRouteLeave,
  onBeforeRouteUpdate,
} from "vue-router";
import { request } from "@/network/request.js";
import { Toast } from "vant";
import { GetSignature } from "../../utils/wx-sdk.js";
import { BASESHARE } from "../../../setting.js";
export default {
  name: "fillinfo",
  components: {
    MainNavBar,
  },
  setup() {
    const currentRate = ref(0);
    const text = computed(() => currentRate.value.toFixed(0) + "%");
    const showInfo = ref(false);
    const isLoading = ref(false);
    const store = useStore();
    const isPaying = ref(false);
    const router = useRouter();
    const route = useRoute();
    const ipt = ref(null);
    const minDate = new Date(1900, 0, 1);
    const maxDate = ref(new Date());
    const isFirst = ref(true);
    const showGender = ref(false);
    const showBirthday = ref(false);
    const showCategory = ref(false);
    const showAddress = ref(false);
    const showLevel = ref(false);
    const showParentLevel = ref(false);
    const columns = ["男", "女"];
    const levelList = ref([]);
    const levelInfo = ref([]);
    const userId = ref("");
    const categorycolumns = ["幼儿园", "学校", "俱乐部","媒体","协会","其他"];
    const currentBirthday = ref(new Date());
    const token = ref("");
    const state = reactive({
      file: null,
      headerimg: "",
      name: "",
      gender: "请选择运动员性别",
      birthday: "请选择运动员出生日期",
      city: "请选择运动员所在城市",
      category: "请选择得知渠道",
      categroyDetail: "",
      level: "1 级",
      parentLevel: "初级（建议4岁以下）",
      userInfo: {},
      match: JSON.parse(sessionStorage.getItem("match")),
      genderIndex: 0,
      categoryIndex: 0,
      parentLevelIndex: 0,
      levelIndex: 0,
      video_key: "",
      prove:"",
      notification:"",
      policy:"",
      info_book:""
    });
    const ipt2 = ref(null)
    const ipt3 = ref(null)
    function selectProve(){
      ipt2.value.value = "";
            // state.headerimg = "";
      ipt2.value.click();
    }
    function selectNotification(){
      ipt3.value.value = "";
            // state.headerimg = "";
      ipt3.value.click();
    }
     async function proveChange(){
      state.prove = ipt2.value.files[0];
      // console.log(/image\/.*/.test(ipt.value.files[0].type));
      currentRate.value = 0;
      const result = await upload(state.prove,true);
      state.policy = result.key
      // console.log("此处拿到结果了prove",result);
      // state.video_key = result.key;
    };
    async function notificationChange(){
      state.notification = ipt3.value.files[0];
      // console.log(/image\/.*/.test(ipt.value.files[0].type));
      currentRate.value = 0;
      const result = await upload(state.notification,false,true);
      // console.log("此处拿到结果了notification",result.key);
      state.info_book = result.key
      // state.video_key = result.key;
    };


    let toast = null;
    const isCanClick = computed(() => {
      if (!isFirst.value) {
        return true;
      }
      if (
        isFirst.value &&
        state.headerimg !== "" &&
        state.name !== "" &&
        state.category !== "请选择得知渠道" &&
        state.gender !== "请选择运动员性别" &&
        state.birthday !== "请选择运动员出生日期" &&
        state.city !== "请选择运动员所在城市" &&
        state.categroyDetail != "" &&
        state.prove !== ""&&
        state.notification !== ""
      ) {
        return true;
      }
      return false;
    });
    const selectImg = () => {
      ipt.value.value = "";
      // state.headerimg = "";
      ipt.value.click();
    };
    const imgChange = async () => {
      state.file = ipt.value.files[0];
      // console.log(/image\/.*/.test(ipt.value.files[0].type));
      currentRate.value = 0;
      const result = await upload(state.file);
      state.video_key = result.key;
      // 'http://qnticao.laigl.com/' + 
    };

    const getLevelStr = (list) => {
      return list.map((item) => {
        return item.level_name;
      });
    };
    // 获取上传凭证
    const getQiniuToken = async () => {
      const qn = await request({
        url: "/v1/upload/getToken",
      });
      if (qn.code == 2000) {
        token.value = qn.data;
      }
    };
    // 生成随机视频名称
    const randomWord = (randomFlag, min, max) => {
      var str = "",
        range = min,
        arr = [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "a",
          "b",
          "c",
          "d",
          "e",
          "f",
          "g",
          "h",
          "i",
          "j",
          "k",
          "l",
          "m",
          "n",
          "o",
          "p",
          "q",
          "r",
          "s",
          "t",
          "u",
          "v",
          "w",
          "x",
          "y",
          "z",
          "A",
          "B",
          "C",
          "D",
          "E",
          "F",
          "G",
          "H",
          "I",
          "J",
          "K",
          "L",
          "M",
          "N",
          "O",
          "P",
          "Q",
          "R",
          "S",
          "T",
          "U",
          "V",
          "W",
          "X",
          "Y",
          "Z",
        ];
      // 随机产生
      if (randomFlag) {
        range = Math.round(Math.random() * (max - min)) + min;
      }
      for (var i = 0; i < range; i++) {
        let pos = Math.round(Math.random() * (arr.length - 1));
        str += arr[pos];
      }
      return str;
    };
    // 上传视频至七牛云
    const upload = (file,prove = false,notification = false) => {
      let toast1 = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "0%",
      });
      return new Promise((resolve, reject) => {
        let key = randomWord(false, 20);
        var config = {
          useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
          region: qiniu.region.z0, //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域。  我这里是华东区
          domain: "https://qnticao.laigl.com", //配置好的七牛云域名  如   https://cdn.qniyun.com/
          // max_file_size: "100mb",
          chunkSize: 5, //每个分片的大小，单位mb，默认值3
          forceDirect: false, //直传还是断点续传方式，true为直传
        };
        var putExtra = {
          fname: file.name, //文件原始文件名
          params: {}, //放置自定义变量
          mimeType: "image/png,image/jpg,image/jpeg", //限制上传文件类型
          // mimeType: [] || null, //限制上传文件类型
          // ...config,
        };
        var observable = qiniu.upload(file, key, token.value, putExtra, config);
        observable.subscribe({
          next: (result) => {
            //主要用来展示进度
            currentRate.value = Math.floor(result.total.percent);
            toast1.message = Math.floor(result.total.percent) + "%";
          },
          error: (err) => {
            //上传错误后触发
            // console.log(err);
            currentRate.value = 0;
            // Toast.clear();
            toast1.clear();
            toast1.fail("照片上传失败");
            return;
          },
          complete: (result) => {
            //上传成功后触发。包含文件地址。
            if(!prove && !notification){
              state.headerimg = URL.createObjectURL(file);
            }else if(prove){
              state.prove = URL.createObjectURL(file);
            }else if(notification){
              state.notification = URL.createObjectURL(file);
            }
            toast1.clear();
            Toast.success("照片上传成功");
            resolve(result);
          },
        });
      });
      // });
    };

    const genderConfirm = (value, index) => {
      state.genderIndex = index;
      // 将选中的赋值给gender
      state.gender = value;
      showGender.value = false;
    };
    const birthdayConfirm = (value) => {
      const date = new Date(value);
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (String(month).length == 1) {
        month = "0" + month;
      }
      if (String(day).length == 1) {
        day = "0" + day;
      }
      // 将选中的赋值给gender
      state.birthday = `${year}/${month}/${day}`;
      showBirthday.value = false;
    };
    const categoryConfirm = (value, index) => {
      state.category = value;
      state.categoryIndex = index;
      showCategory.value = false;
    };
    const addressConfirm = (value) => {
      state.city = value[0].name + "  " + value[1].name + " " + value[2].name;
      showAddress.value = false;
    };
    const levelConfirm = (value, index) => {
      state.level = value;
      state.levelIndex = index;
      showLevel.value = false;
    };
    const parentLevelConfirm = (value, index) => {
      state.parentLevel = value;
      state.parentLevelIndex = index;
      showParentLevel.value = false;
    };
    const onCancel = () => {
      showGender.value = false;
      showBirthday.value = false;
      showCategory.value = false;
      showAddress.value = false;
      showLevel.value = false;
      showParentLevel.value = false;
    };
    const goRequipment = (match_id, index, match_name) => {
      let level = "";
      let res = [];
      if (index === 0) {
        level = state.level;
        // 通级赛
        if (!level.includes("岁")) {
          res = levelInfo.value[index].filter((item) => {
            return Number(item.level) == parseInt(level); //将1 级解析成1
          });
        } else {
          res = levelInfo.value[index].filter((item) => {
            return item.level_name === level; //将1 级解析成1
          });
        }
      } else if (index === 1) {
        // 亲子赛
        level = state.parentLevel;
        if (level.includes("岁")) {
          res = levelInfo.value[index].filter((item) => {
            return item.level_name === level; //将1 级解析成1
          });
        } else {
          //通级赛
          res = levelInfo.value[index].filter((item) => {
            return Number(item.level) == parseInt(level); //将1 级解析成1
          });
        }
      }
      if (match_name !== "全国首届体操通级比赛") {
        router.push({
          path: "/matchRules",
          query: {
            match_id,
            level_id: res[0].id,
            currentIndex: 1,
            name: state.match[index].match_name,
          },
        });
        return;
      }
      router.push({
        path: "/actionDetail",
        query: {
          match_id,
          level_id: res[0].id,
          currentIndex: 1,
          name: state.match[index].match_name,
        },
      });
    };
    // 获取是否第一次信息
    const getIsFirstInfo = async () => {
      // route.params.compet_id
      const res = await request({
        url: "v1/index/getSigninfo",
        data: {
          id_card: store.state.signInfo.id_card ?? "",
          // id_card: route.params.id_card ?? "422422197809221211",
        },
      });
      //  console.log(res);
      if (res.code === 200) {
        state.userInfo = res.data.data;
        isFirst.value = false;
      } else if (res.code === 400) {
        //  暂未报名
        console.log("暂未报名");
      }
    };
    const isValid = () => {
      if (state.userInfo.head_img === null) {
        Toast("请上传一寸证件照");
        return false;
      }
      if (state.userInfo.sign_name === "") {
        Toast("请填写运动员姓名");
        return false;
      }
      if (state.userInfo.sex === "请选择运动员性别") {
        Toast("请选择运动员性别");
        return false;
      }
      if (state.userInfo.birthday === "请选择运动员出生日期") {
        Toast("请选择运动员出生日期");
        return false;
      }
      if (state.userInfo.city === "请选择运动员所在城市") {
        Toast("请选择运动员所在城市");
        return false;
      }
      if (state.userInfo.channel === "请选择得知渠道") {
        Toast("请选择得知渠道");
        return false;
      }
      if (state.userInfo.channel_name === "") {
        Toast("请填写渠道全称");
        return false;
      }
      if(state.prove===""){
        Toast("请上传意外险保单")
        return false
      }
      if(state.notification===""){
        Toast("请上传自愿参赛告知书")
        return false
      }
      return true;
    };
    // 报名
    const signUp = async () => {
      let compet_id = [];
      let level_id = [];
      let arr = levelInfo.value[0].filter((item) => {
        return item.level == parseInt(state.level);
      });
      level_id.push(arr[0].id);
      if (levelInfo.value.length > 1) {
        level_id.push(
          levelInfo.value[1].filter((item) => {
            // return item.level == parseInt(state.parentLevel);
            // 2021年5月14日10:17:31修改
            return item.level_name === state.parentLevel;
          })[0].id
        );
      }
      state.match.forEach((item) => {
        compet_id.push(item.compet_id);
      });
      if (isFirst.value === true) {
        state.userInfo.compet_id = compet_id.join(",");
        state.userInfo.level_id = level_id.join(",");
        state.userInfo.user_id = userId.value;
        state.userInfo.sign_name = state.name;
        state.userInfo.head_img = state.video_key;
        if (state.gender === "男") {
          state.userInfo.sex = 0;
        } else if (state.gender === "女") {
          state.userInfo.sex = 1;
        } else {
          state.userInfo.sex = "请选择运动员性别";
        }
        state.userInfo.birthday = state.birthday;
        state.userInfo.id_card = store.state.signInfo.id_card;
        state.userInfo.id_type = store.state.signInfo.id_type;
        state.userInfo.city = state.city;
        state.userInfo.channel = state.category;
        state.userInfo.channel_name = state.categroyDetail;
      }
      if (!isValid()) {
        return;
      }
      isLoading.value = true;
      toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });
      try {
        gotoPay(compet_id, level_id);
      } catch (error) {
        isPaying.value = false;
        isLoading.value = false;
      }
    };
    // 支付
    const gotoPay = async (compet_id, level_id) => {
      // deayfn(toast.clear)
      // return
      isPaying.value = true;
      let data = new FormData();
      data.append("compet_id", compet_id.join(","));
      data.append("level_id", level_id.join(","));
      data.append("user_id", state.userInfo.user_id);
      data.append("sign_name", state.userInfo.sign_name);
      data.append("head_img", 'http://qnticao.laigl.com/'+state.userInfo.head_img);
      data.append("sex", state.userInfo.sex);
      data.append("birthday", state.userInfo.birthday);
      data.append("id_type", state.userInfo.id_type);
      data.append("id_card", state.userInfo.id_card);
      data.append("city", state.userInfo.city);
      data.append("channel", state.userInfo.channel);
      data.append("channel_name", state.userInfo.channel_name);
      data.append("policy",'http://qnticao.laigl.com/'+ state.policy);
      data.append("info_book",'http://qnticao.laigl.com/' + state.info_book);

      // Toast("马上调用v1/index/sign接口");
      const res = await request({
        url: "v1/index/signs",
        data,
      });
      // Toast("v1/index/sign拿到数据");
      if (res.code == 200) {
        const sign_id = res.data.sign_id;
        isLoading.value = false;
        // Toast(res.msg + "准备获取微信支付的凭证");
        GetSignature(BASESHARE, async () => {
          const result = await request({
            url: "v1/ucenter/wxPay",
            data: {
              sign_id,
              compet_id: state.userInfo.compet_id,
              id_card: state.userInfo.id_card,
              level_id: state.userInfo.level_id,
              price: 0.01,
              // 价格无论传多少都无所谓  由后端控制
              token: sessionStorage.getItem("token"),
            },
          });

          // Toast("v1/ucenter/wxPay没出现错误")
          if (result.code == 2000) {
            // alert("马上调用微信SKD支付")
            // Toast("马上调用微信SKD支付");
            const {
              appId,
              nonceStr,
              paySign,
              signType,
              timeStamp,
            } = result.data;
            try {
              toast.clear();
              wx.chooseWXPay({
                // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。
                // 但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                timestamp: timeStamp,
                // 支付签名随机串，不长于 32 位
                nonceStr: nonceStr,
                package: result.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: paySign, // 支付签名
                success: function (res) {
                  // 支付成功后的回调函数
                  // console.log(res)
                  // Toast("马上调用sign接口");
                  isPaying.value = false;
                  router.push("/mymatch");
                },
                fail: function (res) {
                  // Toast("支付失败");
                  isPaying.value = false;
                },
                complete: function (res) {
                  // console.log(res, "complete");
                  // Toast("支付完成不确定成功");
                  isPaying.value = false;
                },
              });
            } catch (error) {
              Toast("sdk调用错误");
              alert(error);
            }
          } else {
            toast.clear();
            isPaying.value = false;
            Toast(result.msg);
          }
        });
      } else {
        toast.clear();
        isPaying.value = false;
        isLoading.value = false;
        Toast(res.msg);
      }
    };
    // 获取比赛等级
    const getMatchLevel = async () => {
      let tasks = JSON.parse(sessionStorage.getItem("match")).map((item) => {
        // let tasks = [1].map(item=>{
        return request({
          url: "v1/index/getLevel",
          data: {
            compet_id: item.compet_id,
          },
        });
      });
      const resList = await Promise.all(tasks);
      levelInfo.value = [];
      resList.forEach((item) => {
        levelInfo.value.push(item.data.rows);
        let arr = [];
        item.data.rows.forEach((el) => {
          // console.log(el);
          arr.push({ level: el.level, level_name: el.level_name });
        });
        levelList.value.push(arr);
      });
      // 2021年6月2日20:08:40
      if(state.levelIndex == 0){
        state.level = levelList.value[0][0].level_name;
      }
      if(state.parentLevelIndex == 0){
        state.parentLevel = levelList.value[1][0].level_name;
      }
      
      
    };
    const getUserInfo = async () => {
      const res = await request({
        url: "v1/ucenter/getUserInfo",
        data: {
          openid: sessionStorage.getItem("openid"),
        },
      });
      if (res.code === 200) {
        userId.value = res.data.row.id;
      } else {
        Toast(res.msg);
      }
    };
    const subPrice = computed(() => {
      return state.match.some((item) => {
        return item.compet_id === 1;
      });
    });
    onBeforeRouteLeave((to, from, next) => {
      Toast.clear();
      if (to.path === "/actionDetail" || to.path === "/matchRules") {
        store.commit("changeShowInfo", state);
      }
      next();
    });

    onMounted(() => {
      Toast.allowMultiple();
      // for (const key in store.state.showInfo) {
      //   state[key] = store.state.showInfo[key];
      // }
      console.log(state);
      getUserInfo();
      getIsFirstInfo();
      getMatchLevel();
      getQiniuToken();
    });
    return {
      selectNotification,
      selectProve,
      notificationChange,
      proveChange,
      ipt2,
      ipt3,
      currentRate,
      text,
      isPaying,
      areaList,
      state,
      columns,
      categorycolumns,
      genderConfirm,
      showGender,
      showCategory,
      showAddress,
      selectImg,
      onCancel,
      birthdayConfirm,
      showBirthday,
      showParentLevel,
      parentLevelConfirm,
      minDate,
      maxDate,
      currentBirthday,
      categoryConfirm,
      addressConfirm,
      showLevel,
      levelConfirm,
      isFirst,
      ipt,
      imgChange,
      goRequipment,
      levelList,
      levelInfo,
      signUp,
      isValid,
      isLoading,
      subPrice,
      getLevelStr,
      isCanClick,
    };
  },
  beforeRouteEnter(to, from, next) {
    if (from.path == "/actionDetail" || from.path == "/matchRules") {
      next(vm=>{
        console.log(vm.$store.state.showInfo);
        for (const key in vm.$store.state.showInfo) {
        vm.state[key] = vm.$store.state.showInfo[key];
      }
      });
    } else if (from.path !== "/actionDetail") {
      next();
      // next((vm) => {
      //   vm.$store.commit("changeShowInfo", {
      //     file: null,
      //     headerimg: "",
      //     name: "",
      //     gender: "请选择运动员性别",
      //     birthday: "请选择运动员出生日期",
      //     city: "请选择运动员所在城市",
      //     category: "请选择得知渠道",
      //     categroyDetail: "",
      //     level: "1 级",
      //     parentLevel: "初级（建议4岁以下）",
      //     userInfo: {},
      //     match: JSON.parse(sessionStorage.getItem("match")),
      //   });
      // });
    }
  },
};
</script>

<style lang="less" scoped>
.prove{
  margin-top:5.333vw;
  justify-content: space-between;
  align-items: center;
  width: 88.267vw;
  font-size: 3.2vw;
  // padding: 0 4.267vw;
  background-color: #f9f9f9;
  color: #ced3e0;
  padding-bottom: 4vw;
  .title{
    font-size: 4.267vw;
  }
  .left_bottom{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    // align-items: center;
    a{
      color: #0054a6;
      text-decoration:underline
    }
    .up_tip{
      width: 40vw;
      line-height: 4.267vw;
      font-size: 3.733vw;
      color: #fccf00;

    }
  }
  .left,.right{
         padding-top: 4vw;
         margin: 0 4.533vw;
    .file{
      margin-top: 3.2vw;
      margin-right: 2.667vw;
      width: 37.333vw;
      height: 37.333vw;

      .header{
        width: 100%;
        height: 100%;
        border-radius: 2.667vw;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
       .add {
          //   border: 0.267vw dashed #ccc;
          width: 5.333vw;
          height: 5.333vw;
          background: url("http://qnticao.laigl.com/vue/add.png") center
            no-repeat;
        }
      }
      img{
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
    }
    
  }
  .left{
    margin-left: 4.533vw;
    margin-right:4.533vw ;
     .up_tip{
      margin-top: 3.2vw;
    }
          
  }
  .right{
    margin-top: 4vw;
    .up_tip{
      margin-top: 7.2vw;
    }
  }
}
.container {
  width: 100%;
  height: calc(100vh - 13.333vw);
  background-image: url("http://qnticao.laigl.com/vue/profile_bg_big.jpg");
  background-repeat: repeat;
  background-color: #0054a6;
  position: relative;
  // background-size: contain;
  background-size: 100% auto;

  .roll {
    position: absolute;
    left: 11.467vw;
    top: 8.267vw;
    box-sizing: border-box;
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 50%;
    border: 0.533vw solid #ffffff;
  }
  .line {
    position: absolute;
    left: 12.8vw;
    top: 11.467vw;
    width: 0.533vw;
    height: 14.667vw;
    background: #ffffff;
    border-radius: 0.267vw;
  }
  .cardinfo {
    width: 43.2vw;
    height: 8.533vw;
    font-size: 4.8vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 8.533vw;
    margin-left: 17.6vw;
    padding-top: 5.333vw;
  }
  .info {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 30.5vw);
    overflow: hidden;
    width: 100%;
    padding: 0 6.133vw 12vw 6.133vw;
    background-color: #fff;
    margin: 3.2vw auto 0 auto;
    border-top-left-radius: 3.2vw;
    border-top-right-radius: 3.2vw;
    -webkit-appearance: none;
    .base-info {
      width: 88vw;
      height: 22.133vw;
      background: #f9f9f9;
      border-radius: 3.733vw;
      -webkit-appearance: none;
      margin-top: 7.467vw;
      display: flex;
      flex-direction: column;
      .top {
        display: flex;
        margin: 4vw auto 1.067vw 6.933vw;
        .name {
          font-size: 4.8vw;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          line-height: 6.667vw;
        }
        .sex {
          width: 11.2vw;
          height: 5.333vw;
          text-align: center;
          line-height: 5.333vw;
          font-size: 3.733vw;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ced3e0;
        }
      }
      .address {
        margin: 0 auto 4.533vw 6.933vw;
        font-size: 4.267vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ced3e0;
        line-height: 5.867vw;
      }
    }
    .photo {
      display: flex;
      flex-direction: column;
      margin-bottom: 2.4vw;
      .header {
        align-self: center;
        margin-top: 2.133vw;
        width: 26.667vw;
        height: 37.333vw;
        border-radius: 1.867vw;
        border: 0.267vw solid #e7eaf0;
        display: flex;
        justify-content: center;
        align-items: center;
        .add {
          //   border: 0.267vw dashed #ccc;
          width: 5.333vw;
          height: 5.333vw;
          background: url("http://qnticao.laigl.com/vue/add.png") center
            no-repeat;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .name {
      .ipt {
        width: 88vw;
        height: 14.133vw;
        border-radius: 3.2vw;
        border: 0.267vw solid #e7eaf0;
        font-size: 4.8vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ced3e0;
        line-height: 6.667vw;
        // height:  6.667vw;
        // &.filled {
        //   .van-field__control{
        //     font-size: 5.8vw  !important;
        //   font-family: PingFangSC-Semibold, PingFang SC;
        //   font-weight: 600 !important;
        //   line-height: 6.667vw !important;
        //   color: #0a2463 !important;
        //   }
        // }
      }
    }
    .tips {
      font-size: 4.8vw;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 6.667vw;
      margin-bottom: 2.133vw;
      margin-top: 5.867vw;
      &::before {
        content: "*";
        font-size: 3.733vw;
        font-weight: 700;
        color: #ffb730;
        transform: scale(2);
        margin-right: 3.467vw;
      }
    }

    .id-card-type {
      box-sizing: border-box;
      color: #ced3e0;
      padding-left: 4.267vw;
      padding-right: 7.467vw;
      font-size: 4.8vw;
      font-weight: 400;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &.filled {
        font-size: 4.8vw;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #0a2463;
        line-height: 6.667vw;
      }
      img {
        width: 2.8vw;
        height: 3.2vw;
      }
      &.first {
        // background-color: #e7eaf0;
        background-color: #f4f4f4;
        pointer-events: none;
      }
    }
    .category-detail {
      span:nth-of-type(2) {
        display: inline-block;
        text-align: center;
        width: 52.267vw;
        height: 5.333vw;
        font-size: 3.733vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ced3e0;
        line-height: 5.333vw;
      }
    }
    .name.level {
      .tips {
        font-size: 4.8vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 6.667vw;
        margin-bottom: 2.133vw;
        margin-top: 5.867vw;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        position: relative;
        span:nth-child(1) {
          display: inline-block;
          width: 49.867vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span:nth-child(2) {
          position: absolute;
          right: 0;
          font-size: 3.733vw;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #fccf00;
          text-align: right;
        }
        &::before {
          content: "";
          display: inline-block;
          width: 1.6vw;
          height: 1.6vw;
          line-height: 1.6vw;
          background-image: url("http://qnticao.laigl.com/vue/isActive.png");
          background-repeat: no-repeat;
          background-size: 100%;
          font-size: 3.733vw;
          font-weight: 700;
          color: #ffb730;
          transform: scale(1.5);
          margin-right: 1.867vw;
          margin-left: 1.067vw;
          margin-bottom: 0.533vw;
          //   border: dashed 0.267vw #ccc;
        }
      }
      .mark {
        font-size: 3.733vw;
        color: #fccf00;
        font-weight: 400;
        margin-top: 2.667vw;
      }
    }
  }
  .bottom {
    margin-top: 12.8vw;
    width: 100%;
    //   background-color: red;
    border-top: 0.267vw solid rgba(132, 145, 177, 0.19);
    .info-detail {
      padding: 4.8vw 6.133vw 12.267vw 6.133vw;
      .item {
        width: 100%;
        // background-color: red;
        margin-bottom: 4.8vw;
        color: #ced3e0;
        display: flex;
        justify-content: space-between;
        .left {
          //   width: 37.333vw;
          height: 5.333vw;
          font-size: 3.733vw;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ced3e0;
          line-height: 5.333vw;
        }
        .right {
          div:nth-child(1) {
            // width: 6.133vw;
            height: 5.333vw;
            line-height: 5.333vw;
            font-size: 3.733vw;
            color: #0a2463;
          }
          div:nth-child(2) {
            font-size: 3.2vw;
            text-align: right;
          }
        }
      }
    }
  }
  .go-pay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 16vw;
    line-height: 16vw;
    text-align: center;
    background-color: #0054a6;
    color: #fff;
    font-size: 5.6vw;
    border-radius: 5.333vw 5.333vw 0vw 0vw;
    -webkit-appearance: none;
  }
  .paying {
    pointer-events: none;
    background-color: #ced3e0;
  }
}
.loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
}
</style>